<template>
  <div>
    <el-dropdown @command="languageChange">
      <span class="el-dropdown-link">
        <span>
          {{ messages[locale].langName }}
        </span>
        <el-icon class="el-icon--right">
          <ArrowDown />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="language in languages"
            :key="language"
            :disabled="language.indexOf(locale) != -1"
            :command="language"
          >
            {{ messages[language].langName }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { ArrowDown } from "@element-plus/icons-vue";
import { useI18n } from "#imports";
import { messages } from "@/i18n";

const appStore = useStore.appStore();
const languages = Object.keys(messages);
const { locale } = useI18n();
const languageChange = async (language) => {
  await appStore.setLanguage(language);
  locale.value = language;
  // 切换语言页面跳转
  const switchLocalePath = useSwitchLocalePath();
  await navigateTo(switchLocalePath(language));
};
</script>

<style scoped lang="less">
.el-dropdown-link {
  font-family: Helvetica, Helvetica;
  font-weight: bold;
  font-size: 18px;
  color: #ffffff;
  font-style: normal;
  text-transform: none;
  display: flex;
  align-items: center;
  height: auto;
  cursor: pointer;

  .el-icon--right {
    margin-left: 5px;
  }
}
</style>
